import React from 'react'
import { useSelector } from 'react-redux'
import {
  Link,
  BrowserRouter as Router,
  Switch,
  Route,
  Redirect,
} from 'react-router-dom'
import PrivateRoute from './components/PrivateRoute'
import { getToken } from './features/user/slice'
import Main from './pages/workspace/Main'
import WorkspaceDetailPage from './pages/workspace/WorkspaceDetailPage'
import './App.less'
import LoginPage from './pages/login/LoginPage'

function App() {
  const token = useSelector(getToken)
  return (
    <Router>
      <Switch>
        <Route path="/login">
          {token ? <Redirect to="/main"></Redirect> : <LoginPage></LoginPage>}
        </Route>
        <PrivateRoute path="/main" component={Main} exact />
        <PrivateRoute
          path="/workspace/:wid"
          exact
          component={WorkspaceDetailPage}
        />
        <Route path="*">
          {token ? <Main></Main> : <LoginPage></LoginPage>}
        </Route>
      </Switch>
    </Router>
  )
}

export default App
